<html> 
<head> 
	<title>Stacked Bar Chart</title> 
	<script type="text/javascript" src="protovis-r3.2.js"></script>
	<style type="text/css">
	#figure-wrapper {
		width: 500px;
		font-family: Arial;
	}
	#figure {
		height: 600px;
	}
	#lead-in {
		padding-left: 20px;
	}
	h1 {
		font-size: 17px;
		text-transform: uppercase;
		margin-bottom: 0px;
		color: #FF6633;
	}
	p {
		font-size: 12px;
	}
	.label {
		position: absolute;
		left: 650px;
		font-size: 12px;
		font-style: italic;
	}
	#winnertotal { top: 300px; }
	#loserstotal { top: 118px; }
	</style>
</head> 
<body>
	<div id="figure-wrapper">
		<div id="lead-in">
			<h1>2011 Charleston Municipal Elections</h1>
			<p>Percentage of total votes for each zone in Charleston.</p>
		</div><!-- @end lead-in -->
		<div id="figure">
			<div id="winnertotal" class="label">Winner's votes</div>
			<div id="loserstotal" class="label">Opponent's votes</div>
			
	    <script type="text/javascript+protovis"> 
	
		var data = {
		  "Zone":["Zone 1","Zone 2","Zone 3","Zone 4","Zone 5"],
		  "WinnerTotal":[52,65,90,38,59],
		  "LosersTotal":[48,35,10,62,41]
		};
		var cat = data.Zone;
		var data = [data.WinnerTotal, data.LosersTotal];

		var w = 600,
		    h = 250,
			x = pv.Scale.ordinal(cat).splitBanded(0, w, 4/5),
			y = pv.Scale.linear(0, 100).range(0, h),
			fill = ["#FF6633", "#FFCC33"];

		var vis = new pv.Panel()
		    .width(w)
		    .height(h)
		    .bottom(90)
		    .left(32)
		    .right(10)
		    .top(15);

		// Stacked layout 
		var bar = vis.add(pv.Layout.Stack)
		    .layers(data)
		    .x(function() x(this.index))
		    .y(function(d) y(d))
		  .layer.add(pv.Bar)
			.fillStyle(function() fill[this.parent.index])
			.title(function(d) d + "%")
			.width(x.range().band)
		  .event("mouseover", function() this.fillStyle("#555"))
		  .event("mouseout", function() this.fillStyle(fill[this.parent.index]));

		// Labels
		bar.anchor("center").add(pv.Label)
			.visible(function(d) d > 11)
			.textStyle("white")
			.text(function(d) d.toFixed(0));
		
		bar.anchor("bottom").add(pv.Label)
			.visible(function() !this.parent.index)
			.textAlign("right")
			.top(260)
			.left(function() x(this.index)+60)
			.textAngle(-Math.PI / 4)
			.text(function() cat[this.index]);

		// Ticks
		vis.add(pv.Rule)
			.data(y.ticks())
			.bottom(y)
			.left(-15)
			.width(15)
			.strokeStyle(function(d) d > 0 ? "rgba(0,0,0,0.3)" : "#000")
		  .anchor("top").add(pv.Label)
			.bottom(function(d) y(d)+2)
			.text(function(d) d == 100 ? "100%" : d.toFixed(0));
		
		vis.add(pv.Rule)
			.bottom(y)
			.left(-15)
			.right(0)
			.strokeStyle("#000")

		vis.render();

	    </script>
	
		
		</div><!-- @end figure -->
	</div><!-- @end figure-wrapper -->
</body> 
</html>